Open topic with navigation

Open topic with navigation

Google Map Components

To display location-related data on a Google Map component, use the following general procedure:

  1. Select the stage or desired parent group and choose Insert > Component > Google Map.
  2. Create a symbol to act as your map marker. For the data that you want to display at each marked location, add parameters for the symbol and bind the parameters to the relevant properties.
  3. To define the table containing coordinates and related data, edit the dataflow for the Google Map component. (The dataflow contains a sample data table.) You can extract data from a static CSV file, a web service, or a database, according to your requirements. To populate symbol parameters, ensure that your table contains corresponding columns to bind to the parameters.
  4. Select the map component. In the Property Inspector, expand the Repeater section and configure its settings as follows:
    1. For Symbol, type the name of the symbol or drag in a symbol from the Symbols panel.
    2. Bind the location table that resides in the map dataflow to the map component's Data property, as follows: Open the dataflow, select the table, and drag its blue dot to the Data field.
    3. Set the latitude and longitude fields to the names of the table columns that contain this data.
  5. To populate the additional symbol parameters, select the map's "renderer" child node and, in the Property Inspector, bind each symbol parameter from the table column that is the source of its data.

The following video shows an example of this process, including the definition of a callout that displays location-specific data when the map marker is clicked.

To create layers that you can show and hide, add Map Groups to your Google Map and populate the map groups with the desired data.

Rendering Multiple Components using Repeaters

To populate a map group with multiple components, perform the following steps:

  1. Create a symbol to be displayed at each location. Add symbol parameters for latitude and longitude and bind the latitude and longitude parameters to the x and y position properties of the symbol.

  2. Add a Google Map to the stage or the desired group, and add a map group to the Google Map.
  3. Select the map group, open its Repeaters properties, and set its Symbol property to the name of the symbol you created in step 1.
  4. In the Google Map's dataflow, define a table containing a latitude and a longitude colume, and populate the table with the coordinates that you want to mark using the symbol.
  5. Bind the table to the map group Repeaters' Data property, as shown in the following figure.

  6. In the outline, expand the map group and click its Renderer node. Bind the latitude and longitude properties from the corresponding table columns, as shown in the following figure.

If you have specified the settings and bindings correctly, your symbol is displayed at all the location in your source table. If there is additional location-specific data that you want to display with the symbol, add table columns for the data and create addition symbol parameters and bind them from the corresponding table column. The source table can be dynamically populated from a database or script in the dataflow.

ClosedHow Do I...?

...Style a Google Map component?

To apply JSON styles to a map, paste the JSON code for the styles into the map's mapStyles property. You can obtain predefined styles from SnazzyMaps' web site and you can define map styles using the Google Maps APIs Styling Wizard.

...Show or hide satellite, road map, terrain, or traffic information?

Edit the mapType property.

...Configure the initial zoom level and location?

The default initial zoom level is 10, and the default initial location is San Francisco, CA. To change these settings, edit the Latitude, Longitude, and Zoom properties.

...Show or hide controls?

In the Property Inspector, under Map, edit the Map Controls property.

 
Return to Atrius Developer Portal Home Page